import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; // 引入 PropTypes 用于 props 验证
import { Tree, Table } from 'antd';

const TreeTable = ({ treeData }) => {
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [tableData, setTableData] = useState([]); // 用于存储表格数据

    const onExpand = (expandedKeys) => {
        setExpandedKeys(expandedKeys);
    };

    const onSelect = (selectedKeys, info) => {
        setSelectedKeys(selectedKeys);

        // 获取选中的节点数据
        const selectedNodes = info.selectedNodes;
        const selectedData = selectedNodes
            .filter(node => node) // 过滤掉 undefined
            .map(node => {
                const dataRef = node?.props?.dataRef; // 确保 dataRef 存在
                if (!dataRef) {
                    console.warn('Missing dataRef property:', node);
                    return null;
                }
                return {
                    ...dataRef,
                    key: dataRef.key,
                    title: dataRef.title,
                };
            })
            .filter(Boolean); // 过滤掉 null 值

        setTableData(selectedData);
    };

    useEffect(() => {
        // 当 treeData 发生变化时，更新 tableData
        if (treeData && treeData.length > 0) {
            setTableData(flattenTreeData(treeData));
        }
    }, [treeData]);

    // 将树形数据展平为适合 Table 组件使用的数据格式
    const flattenTreeData = (data) => {
        let flattenedData = [];

        const flatten = (nodes) => {
            nodes.forEach((node) => {
                flattenedData.push(node);
                if (node.children && node.children.length > 0) {
                    flatten(node.children);
                }
            });
        };

        flatten(data);
        return flattenedData;
    };

    const columns = [
        { title: 'Title', dataIndex: 'title', key: 'title' },
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        // 可以添加更多列
    ];

    return (
        <div>
            <Tree
                treeData={treeData} // 使用 treeData 属性
                onExpand={onExpand}
                expandedKeys={expandedKeys}
                autoExpandParent={false}
                onSelect={onSelect}
                selectedKeys={selectedKeys}
            />
            <Table
                columns={columns}
                dataSource={tableData} // 使用展平后的数据或选中的节点数据
            // 可以添加更多Table属性
            />
        </div>
    );
};

// 添加 prop 类型验证
TreeTable.propTypes = {
    treeData: PropTypes.arrayOf(
        PropTypes.shape({
            title: PropTypes.string.isRequired,
            key: PropTypes.string.isRequired, // 确保 key 是必需的
            children: PropTypes.arrayOf(
                PropTypes.shape({
                    title: PropTypes.string.isRequired,
                    key: PropTypes.string.isRequired, // 确保 key 是必需的
                    name: PropTypes.string,
                    age: PropTypes.number
                })
            )
        })
    ).isRequired
};

export default TreeTable;